<template>
  <div class="home-page">
    <h1>首页</h1>
    <!-- <div class="home-aside">
      <div class="home-title">ADEF-I</div>
      <el-menu
        :default-active="$route.path"
        class="el-menu-vertical-demo"
        :collapse="isCol"
        router
        @open="handleOpen"
        @close="handleClose"
      >
        <meun-item v-for="item in routes" :key="item.path" :item="item" />
      </el-menu>
    </div>
    <div class="home-main">
      <div class="main-top">
        <span class="icon-span el-icon-menu" @click="toggleMenu" />
        <span class="icon-span iconfont icon-tuichu" @click="logout" />
      </div>
      <div class="tab-box">
        <router-link
          v-for="item in tabs"
          :key="item.path"
          class="btn-link"
          :to="item.path"
        >
          {{ item.name }}
          <span class="el-icon-circle-close" />
        </router-link>
      </div>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item
          v-for="item in $route.matched"
          :key="item.path"
          :to="{ path: item.path }"
        >{{ item.name }}</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="main-content">
        <div class="main-options">
    <div class="right" />
  </div>
  <router-view />
  </div>
  </div> -->
  </div>
</template>

<script>
// import { getMenus } from '@/api/service.js'
import { mapGetters } from 'vuex'

export default {
  components: {
  },
  data() {
    return {
      isCol: false
    }
  },

  computed: {
    ...mapGetters(['routes', 'tabs'])
  },

  created() {
    // this.$router.addRoutes(this.routes)
    // this.$store.dispatch('permission/getRoute', 'admin')
    console.error('home created!')
    console.log('$route.path:', this.$route.path)
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
    logout() {
      localStorage.removeItem('token')
      this.$router.push('/login')
    },
    toggleMenu() {
      this.isCol = !this.isCol
      console.log(this.testabc.ddc)
    }
  }
}
</script>

<style lang="less">
html,
.home-page {
  height: 100%;
}

body {
  position: relative;
  min-height: 100%;
}
.home-page {
  padding-left: 250px;
  transition: padding 0.2s;
}

.home-aside {
  background-color: #333;
  position: absolute;
  transition: left 0.2s;
  left: 0;
  top: 0;
  height: 100%;
  width: 250px;
  .home-title {
    height: 60px;
    text-align: center;
    line-height: 60px;
    color: #fff;
    font-size: 24px;
    background: #009688;
  }

  .el-menu-item.is-active {
    background-color: #009688 !important;
  }
}
.el-menu-vertical-demo.el-menu {
  text-align: left;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.home-main {
  height: 100%;
  background: #f1f1f1;
  .main-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 60px;
    border-bottom: 1px solid #009688;
    background-color: #fff;
    .icon-span {
      font-size: 30px;
      color: #009688;
      cursor: pointer;
    }
  }
  .main-content {
    padding: 0 10px;
  }
  .main-options {
    display: flex;
    justify-content: space-between;
    height: 50px;
    background-color: #fff;
    .right {
      padding-top: 5px;
    }
  }
  .el-breadcrumb.main-breadcrumb {
    height: 50px;
    line-height: 50px;
    background: #fff;
  }
}

// .aside-enter-active,
// .aside-leave-active {
//   transition: all 0.3s;
// }
// .aside-enter, .aside-leave-to /* .fade-leave-active below version 2.1.8 */ {
//   left: -250px;
// }

.hide-aside {
  padding-left: 0;
  .home-aside {
    left: -250px;
  }
}

.el-menu--collapse > div > .el-submenu > .el-submenu__title span {
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  display: inline-block;
}
.el-menu--collapse
  > div
  > .el-submenu
  > .el-submenu__title
  .el-submenu__icon-arrow {
  display: none;
}
.tab-box {
  height: 50px;
  padding: 15px 0;
  display: flex;
}

.btn-link {
  border: 1px solid #ccc;
  border-radius: 5px;
}
</style>
